<script setup>
import {ref,onMounted,defineProps} from "vue"
import { router } from "../router"

/**
 * @fan_name : 番剧名称
 * @fan_fm : 番剧封面
 * @fan_type : 番剧什么类型，比如:漫画改
 * @fan_theme1 : 番剧是什么主题,比如: 音乐
 * @fan_theme2 : 番剧是什么主题,比如: 日常
 * @fan_status : 番剧什么状态，比如: 已完结.全n话;更新到第n话
 * @fan_year : 番剧是n年的;比如:2022
 * @fan_msg : 番剧跳转路径
 */
const props = defineProps({
    fan_name:{type:String},
    fan_fm:{type:String},
    fan_type:{type:String},
    fan_theme1:{type:String},
    fan_theme2:{type:String},
    fan_status:{type:String},
    fan_year:{type:String},
    fan_msg: {type:String}
    // fan_ji_name:{type:String}
})
// document.title = props.fan_ji_name
onMounted(()=>{
    // document.title = props.fan_ji_name
})
const goToFan = () => {
    router.push(`/anime-detail/${props.fan_msg}`)
}

</script>

<template>
    <div class="animeMsgAllBox" @click="goToFan">
        <div class="back">
            <img :src="props.fan_fm" alt="" />
        </div>
        <div class="animeMsgAll">
            <img :src="props.fan_fm" alt="">
        </div>
        <div class="animeNameBox">
            <span>{{ props.fan_name }}</span>
        </div>
        <div class="animeMsgBox">
            <span>{{ props.fan_type }}/{{ props.fan_theme1 }}/{{ props.fan_theme2 }}/{{ props.fan_year }}&nbsp;.&nbsp;{{ props.fan_status }}</span>
        </div>
    </div>
</template>

<style scoped>
.animeMsgAllBox{
    width: 100%;
    height: 60%;
    /* background-color: red; */
    display: flex;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.back img{
    position: relative;
    top: -70%;
    width: 100%;
    filter: blur(20px);
    border-radius: 10px;
}
.animeMsgAll{
    width: 70.5%;
    height: 100%;
}
.animeMsgAll img{
    position: absolute;
    left: 2%;
    top: 105%;
    width: 230px;
    height: 300px;
    border-radius: 10px;
    user-select: none;
}
.animeNameBox{
    position: absolute;
    left: 15%;
    top: 105%;
    /* width: 7%; */
    /* height: 5%; */
    font-size: 25px;
    /* font-weight: 600; */
    user-select: none;
    cursor: pointer;
    transition: all 0.3s;
}
.animeNameBox:hover{
    color: skyblue;
}
.animeMsgBox span{
    position: absolute;
    left: 15%;
    top: 109%;
}
</style>